<template>
    <div class="header">添加案件</div>
    <div class="container">
        <div class="list-box">
            <p class="title">案件基本信息</p>
            <van-cell title="类型" is-link />
            <van-cell title="案由" is-link />
        </div>
        <div class="list-box">
            <p class="title">委托方信息</p>
            <van-field v-model="value" label="委托人姓名" placeholder="请输入原告姓名" />
            <van-field v-model="value" label="委托人电话" placeholder="请输入委托人电话" />
            <van-cell title="委托日期" is-link />
        </div>
        <div class="list-box">
            <p class="title">对方信息</p>
            <van-field v-model="value" label="对方姓名" placeholder="请输入对方姓名" />
            <van-cell title="地址"  placeholder="请输入地址"  is-link />
        </div>
        <div class="list-box">
            <p class="title">文件上传</p>
            <div class="upload-box">
                <p>上传文件</p>
                <van-uploader>
                    <p class="checkfile"> + 选择文件</p>
                </van-uploader>
            </div>
            <div class="upload-box">
                <p>上传图片</p>
                <van-uploader :after-read="afterRead" />
            </div>
        </div>
    </div>
</template>


<style scoped lang="less">
.header{
    width:100%;
    height:60px;
    color:white;
    background:#5A63AE;
    display:flex;
    align-items: center;
    justify-content: center
}
.container{
    padding:15px;
    padding-bottom:60px;
}
.list-box{
    background:white;
    padding:20px;
    margin-bottom:20px;
    border-radius:5px;
    .title{
        color:#5A63AE;
        font-weight:bold;
        margin-bottom:20px;
    }
}
/deep/.van-cell{
    padding:10px 0;
    margin-bottom:10px;
    border-bottom:1px solid #f2f2f2;
    font-size:18px;
}
/deep/.van-field__control{
    text-align:right;
}
.upload-box{
    display:flex;
    padding:15px 0;
    align-items: flex-start;
    p{
        margin-right:15px;
    }
}
.checkfile{
    background:#5A63AE;
    color:white;
    padding:10px 20px;
    display:flex;
    align-items: center;
    justify-content: center;
}
</style>